DEMO

https://codesandbox.io/s/zhong-yao-pu-55g7jg?file=/src/App.js

我們可以多加利用 Clone & Gltf.js 來達成場景中重複使用相同的模型

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Bounds, BakeShadows, Environment, ContactShadows } from '@react-three/drei'
import { Room } from './Room'
import ModelDraco from './ModelDracoOG'
import GoldenText from './GoldenText'
import ModelCupboard from './Model/ModelCupboard'
import ModelWall from './Model/ModelWall'
import ModelCMD from './ModelCMD'

export default function App({ ready }) {
  return (
    <Canvas orthographic shadows dpr={[1, 2]} camera={{ position: [10, 10, 10], zoom: 10 }}>
      {/* <color attach="background" args={['#252530']} /> */}
      {/* <color attach="background" args={['#252530']} /> */}
      <color attach="background" args={['#FCF4EE']} />
      {/* <color attach="background" args={['#E34234']} /> */}
      <Environment preset="city" />

      <ambientLight intensity={0.01} />
      {/* <hemisphereLight intensity={0.125} color="#734036" groundColor="red" /> */}
      {/* <hemisphereLight intensity={0.125} color="#8040df" groundColor="red" /> */}
      {/* <spotLight castShadow color="orange" intensity={2} position={[-50, 50, 40]} angle={0.25} penumbra={1} shadow-mapSize={[128, 128]} shadow-bias={0.00005} /> */}
      <group scale={10}>
        {/* <spotLight
          castShadow
          color="orange"
          intensity={1}
          position={[50, 100, 0]}
          angle={0.15}
          penumbra={0.5}
          shadow-mapSize={[64, 64]}
          shadow-bias={-0.000001}
          target-position={[0, 20, 0]}
        /> */}
      </group>

      <Suspense fallback={null}>
        {/* <Bounds fit clip observe margin={1}> */}
        <group position={[0, 0, 0]}>
          {/* <group position={[5, 43, -12]}> */}

          <group scale={10}>
            {/* <spotLight
              castShadow
              color="orange"
              intensity={1}
              position={[50, 100, 0]}
              angle={0.15}
              penumbra={0.5}
              shadow-mapSize={[64, 64]}
              shadow-bias={-0.000001}
              target-position={[0, 20, 0]}
            /> */}
          </group>
          <group scale={1.7} position={[4 - 5, 20 - 5, -7]}>
            <ModelWall scale={1} position={[-8.8 * 3.5, 0, 8.8 * 2.5]} rotation={[Math.PI / 2, 0, Math.PI / 2]} receiveShadow />
            <ModelWall scale={1} position={[-8.8 * 3.5, 0, 8.8 * 1.5]} rotation={[Math.PI / 2, 0, Math.PI / 2]} receiveShadow />
            <ModelWall scale={1} position={[-8.8 * 3.5, 0, 8.8 * 0.5]} rotation={[Math.PI / 2, 0, Math.PI / 2]} receiveShadow />
            <ModelWall scale={1} position={[-8.8 * 3, 0, 0]} rotation={[Math.PI / 2, 0, 0]} receiveShadow />

            <ModelWall scale={1} position={[-8.8 * 2, 0, 0]} rotation={[Math.PI / 2, 0, 0]} receiveShadow />
            <ModelWall scale={1} position={[-8.8, 0, 0]} rotation={[Math.PI / 2, 0, 0]} receiveShadow />
            <ModelWall scale={1} position={[0, 0, 0]} rotation={[Math.PI / 2, 0, 0]} receiveShadow />
            <ModelWall scale={1} position={[8.8, 0, 0]} rotation={[Math.PI / 2, 0, 0]} receiveShadow />
            <ModelWall scale={1} position={[8.8 * 2, 0, 0]} rotation={[Math.PI / 2, 0, 0]} receiveShadow />
            <ModelWall scale={1} position={[8.8 * 3, 0, 0]} rotation={[Math.PI / 2, 0, 0]} receiveShadow />
            <ModelWall scale={1} position={[8.8 * 3.5, 0, 8.8 * 2.5]} rotation={[Math.PI / 2, 0, Math.PI / 2]} receiveShadow />
            <ModelWall scale={1} position={[8.8 * 3.5, 0, 8.8 * 1.5]} rotation={[Math.PI / 2, 0, Math.PI / 2]} receiveShadow />
            <ModelWall scale={1} position={[8.8 * 3.5, 0, 8.8 * 0.5]} rotation={[Math.PI / 2, 0, Math.PI / 2]} receiveShadow />
          </group>
          <group scale={1.5} position={[-2 - 5, 13.5, -3]}>
            {/* <ModelCupboard position={[-5, 0, 0]} receiveShadow /> */}
            <ModelCupboard scale={[-1, 1, 1]} position={[-26.5 + 2, 0, 0]} />
            <ModelCupboard scale={[-1, 1, 1]} position={[-14.5 + 2, 0, 0]} />
            <ModelCupboard position={[22.5 - 2, 0, 0]} />
            <ModelCupboard scale={[-1, 1, 1]} position={[34.5 - 2, 0, 0]} />
          </group>
          {/* <group scale={1.5} position={[-2 - 5, 13.5, -3]}>
              <ModelCupboard position={[-5, 0, 0]} receiveShadow />
              <ModelCupboard scale={[-1, 1, 1]} position={[7.1, 0, 0]} receiveShadow />
              <ModelCupboard position={[19.2, 0, 0]} receiveShadow />
            </group> */}
          <spotLight position={[5, 30, 30]} angle={0.5} penumbra={1} />
          <Bounds fit clip observe margin={1}>
            <ModelCMD position={[0, 21, 0]} scale={3} rotation={[-Math.PI / 2 + 0.5, -Math.PI / 2, 0]} />
            <ModelDraco scale={10} position={[5 - 6, 1.5 + 1, 1]} receiveShadow castShadow />
            <group position={[5 - 5, 43 + 2, -11]}>
              <GoldenText scale={5} rotation={[0, Math.PI / 2, Math.PI / 2 + 0.1]} receiveShadow />
            </group>
          </Bounds>
          <ContactShadows position={[0, 0, 0]} scale={[100, 40]} blur={10} far={20} receiveShadow castShadow />

          {/* <ModelDraco scale={10} position={[5 - 5, 1.5 + 1, 5.5 * 2]} receiveShadow /> */}
        </group>
        {/* </Bounds> */}
      </Suspense>
      <mesh scale={8.8 * (9 + 3)} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 20]} castShadow receiveShadow>
        <planeGeometry />
        {/* <meshDepthMaterial color={'red'} /> */}
        <meshBasicMaterial receiveShadow attach="material" color="#994639" opacity={0.9} />
        {/* <meshLambertMaterial receiveShadow attach="material" color="#CB1B45" opacity={0.9} /> */}
        {/* <meshBasicMaterial attach="material" color="#64363C" opacity={0.9} /> */}
      </mesh>
      {/* <Bounds fit clip observe margin={1}> */}
      {/* <Room position={[0, 0, 15]} scale={[0.1, 0.19, 0.1]} /> */}
      {/* </Bounds> */}
      <BakeShadows />
      <OrbitControls
        makeDefault
        minAzimuthAngle={-Math.PI / 16}
        maxAzimuthAngle={Math.PI / 16}
        // maxAzimuthAngle={Math.PI / 6}
        minPolarAngle={Math.PI / 3}
        maxPolarAngle={Math.PI / 3}
        enableZoom={true}
        enablePan={true}
        zoomSpeed={0.3}
      />
      {/* <OrbitControls
        makeDefault
        minAzimuthAngle={0}
        maxAzimuthAngle={Math.PI / 2}
        minPolarAngle={Math.PI / 3}
        maxPolarAngle={Math.PI / 3}
        enableZoom={true}
        enablePan={true}
        zoomSpeed={0.3}
      /> */}
      {/* <gridHelper args={[1000, 200, '#151515', '#020202']} position={[0, -4, 0]} /> */}
      {/* <mesh scale={200} rotation={[-Math.PI / 2, 0, 0]} position={[0, -4, 0]} receiveShadow>
        <planeGeometry />
        <shadowMaterial transparent opacity={0.3} />
      </mesh> */}
    </Canvas>
  )
}